<template>
  <div>
    <div style="height: 300px">
      <RelationGraph ref="graphRef" :options="graphOptionsH" :on-node-click="onNodeClick" :on-line-click="onLineClick">
        &ensp;
      </RelationGraph>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import RelationGraph, {
  RGJsonData,
  RGOptions,
  RGNode,
  RGLine,
  RGLink,
  RGUserEvent,
  RelationGraphComponent,
} from "relation-graph-vue3";

const graphRef = ref<RelationGraphComponent | null>(null);
const graphOptionsH: RGOptions = {
  layout: {
    layoutName: "tree",
    min_per_width: 100,
    max_per_width: 200,
    min_per_height: 200,
  },
  defaultLineMarker: {
    markerWidth: 12,
    markerHeight: 12,
    refX: 6,
    refY: 6,
    data: "M2,2 L10,6 L2,10 L6,6 L2,2",
  },
  defaultNodeShape: 1,
  defaultNodeWidth: 30,
  defaultLineShape: 2,
  defaultJunctionPoint: "tb",
  defaultNodeBorderWidth: 0,
  defaultLineColor: "rgba(0, 186, 189, 1)",
  defaultNodeColor: "rgba(0, 206, 209, 1)",
  defaultNodeHeight: 100,
};

const graphOptionsV: RGOptions = {
  layouts: [
    {
      label: "中心",
      layoutName: "tree",
      layoutClassName: "seeks-layout-center",
      defaultJunctionPoint: "border",
      defaultNodeShape: 0,
      defaultLineShape: 1,
      from: "left",
      max_per_width: "300",
      min_per_height: "40",
    },
  ],
  defaultLineMarker: {
    markerWidth: 12,
    markerHeight: 12,
    refX: 6,
    refY: 6,
    data: "M2,2 L10,6 L2,10 L6,6 L2,2",
  },
  defaultNodeShape: 1,
  defaultNodeWidth: 100,
  defaultLineShape: 2,
  defaultJunctionPoint: "lr",
  defaultNodeBorderWidth: 0,
  defaultLineColor: "rgba(0, 186, 189, 1)",
  defaultNodeColor: "rgba(0, 206, 209, 1)",
};
const tabChange = () => {
  showVTree();
};
const showVTree = async () => {
  const __graph_json_data = {
    rootId: "子",
    nodes: [
      { id: "子", text: "DB001", color: "green" },
      { id: "父亲", text: "DB002", color: "#2E86FF" },
      { id: "爷爷", text: "DB003", color: "#CDCDCD" },
      { id: "太爷", text: "DB003", color: "#CDCDCD" },
      { id: "太奶", text: "DB003", color: "#E94848" },
      { id: "奶奶", text: "DB003", color: "#E94848" },
      { id: "外曾祖父", text: "DB003", color: "#CDCDCD" },
      { id: "曾外祖母", text: "DB003", color: "#E94848" },
      { id: "母亲", text: "DB002", color: "#E94848" },
      { id: "姥爷", text: "DB002", color: "#CDCDCD" },
      { id: "太姥爷", text: "DB002", color: "#CDCDCD" },
      { id: "太姥姥", text: "DB002", color: "#E94848" },
      { id: "姥姥", text: "DB002", color: "#E94848" },
      { id: "老姥爷", text: "DB002", color: "#CDCDCD" },
      { id: "老姥姥", text: "DB002", color: "#E94848" },
    ],
    lines: [
      { from: "子", to: "父亲" },
      { from: "子", to: "母亲" },
      { from: "父亲", to: "爷爷" },
      { from: "父亲", to: "奶奶" },
      { from: "爷爷", to: "太爷" },
      { from: "爷爷", to: "太奶" },
      { from: "奶奶", to: "外曾祖父" },
      { from: "奶奶", to: "曾外祖母" },
      { from: "母亲", to: "姥爷" },
      { from: "姥爷", to: "太姥爷" },
      { from: "姥爷", to: "太姥姥" },
      { from: "母亲", to: "姥姥" },
      { from: "姥姥", to: "老姥爷" },
      { from: "姥姥", to: "老姥姥" },
    ],
  };
  __graph_json_data.nodes.forEach(
    (c, index) => (c.text = Genealogy.value[index])
  );
  const graphInstance = graphRef.value?.getInstance();
  if (graphInstance) {
    await graphInstance.setOptions(graphOptionsV);
    await graphInstance.setJsonData(__graph_json_data);
    await graphInstance.moveToCenter();
    await graphInstance.zoomToFit();
  }
};

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
  console.log("onNodeClick:", nodeObject);
};

const onLineClick = (
  lineObject: RGLine,
  linkObject: RGLink,
  $event: RGUserEvent
) => {
  console.log("onLineClick:", lineObject);
};
</script>

<style lang="scss" scoped>
:deep(.relation-graph) {
  .c-node-text {
    padding: 0px;
    place-items: center;
    justify-content: center;
  }
}

.c-my-panel {
  width: 350px;
  text-align: center;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 10px;
  z-index: 800;
  padding: 10px;
  background-color: rgba(239, 239, 239, 0.86);
  border: #eeeeee solid 1px;
  overflow: hidden;

  .c-option-name {
    color: #666666;
    font-size: 14px;
    line-height: 40px;
  }
}
</style>
